<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        #lunbo{
            width: 730px;
            height: 285px;
            margin: 20px auto;
            position: relative;
        }
        #lunbo>img{
            width: 730px;
            height: 285px;
        }
        #lunbo>.btn{
            position: absolute;
            bottom: 10px;
            width: 100%;
        }
        #lunbo>.btn>ul{
            height: 20px;
            margin: 0px auto;
        }
        #lunbo>.btn>ul>li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: lightgray;
            margin: 0 10px;
            cursor: pointer;
        }
        #lunbo>.btn>ul>li.active{
            background-color: red;
        }
        #lunbo>.arrow{
            width: 30px;
            height: 50px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 80%;
            position: absolute;
            cursor: pointer;
            top:120px;
        }
        #lunbo>.arrow:hover{
            background-color: rgba(33,33,33,0.5);
        }
        #lunbo>.left{
            background-image:url(./img/左箭头.png);
            left: 20px;
        }
        #lunbo>.right{
            background-image:url(./img/右箭头.png);
            right: 20px;
        }
    </style>
</head>
<body>
    <div id="lunbo">
        <div class="arrow left"></div>
        <div class="arrow right"></div>
        <img id="img" src="http://p1.music.126.net/c4OUUgRBD9tXSbSjkoUebg==/109951165472529426.jpg?imageView&quality=89">
        <div class="btn flex j-c">
            <ul id="li" class="flex j-c a-c">
               
            </ul>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //定义图片数组
        let imgs = ['http://p1.music.126.net/c4OUUgRBD9tXSbSjkoUebg==/109951165472529426.jpg?imageView&quality=89',
        'http://p1.music.126.net/9VtXoVMaxOcTDx1sNb3iTw==/109951165472564645.jpg?imageView&quality=89',
        'http://p1.music.126.net/_hIolePGAiaMdzGiJqELWw==/109951165472544959.jpg?imageView&quality=89',
        'http://p1.music.126.net/d8MnX6AXluhQBghSCfmUqg==/109951165472867654.jpg?imageView&quality=89',
        'http://p1.music.126.net/letjay5fiubgB8ugGC38eQ==/109951165472587346.jpg?imageView&quality=89']

        //根据图片的数量，创建小按钮
        imgs.forEach((item,index)=>{
            let li = $("<li/>")
            if(index===0){
                li.addClass('active')
            }
            $("#li").append(li)
        })

        let i = 0 //表示指定显示图片的下标
        let timer=''  //表示定时器

        //切换方法
        function change(){
            //显示指定的图片
            $("#img").attr("src",imgs[i])
            //设置指定小按钮的颜色
            $("#li>li").eq(i).addClass('active').siblings('.active').removeClass('active')
        }
        //播放方法
        function run(){
            timer = setInterval(() => {
                //控制i的值
                if(++i>=imgs.length) i = 0
                //调用切换方法
                change()
            }, 4000);
        }
        run()

        //小按钮点击事件
        $("#li>li").click(function(){
            clearInterval(timer)  //清空定时器
            i =  $(this).index()
            //调用切换方法
            change()
            run()  //重启定时器
        })

        //左箭头点击事件
        $('.left').click(function(){
            clearInterval(timer)  //清空定时器
            if(--i<0) i = imgs.length-1  //到最后面
            //调用切换方法
            change()
            run()  //重启定时器
        })

        //右箭头点击事件
        $('.right').click(function(){
            clearInterval(timer)  //清空定时器
            if(++i>=imgs.length) i = 0  //到最前面
            //调用切换方法
            change()
            run()  //重启定时器
        })
    </script>
</body>
</html>